<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引入样式 -->
<!--    <link type='text/css' href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="//unpkg.com/vue/dist/vue.js"></script>-->
<!--    <script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>-->
    <script src="../static/vue/vue.js"></script>
    <script src="../static/jquery-1.12.4/jquery-1.12.4.min.js"></script>
    <script src="../static/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css" />
</head>
<body>
<div id="app">
    <template>
        <el-button @click="add">新增</el-button>
        <el-table :data="tableData" style="width: 100%">

            <el-table-column label="电调名称" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.electricName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="报障方式" width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.repairType }}</span>
                </template>
            </el-table-column>

            <el-table-column label="报修人" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.repairPerson }}</span>
                </template>
            </el-table-column>

            <el-table-column label="报修时间" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.repairTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="故障现象" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.faultContent }}</span>
                </template>
            </el-table-column>

            <el-table-column label="维修负责人" width="90">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.maintainer }}</span>
                </template>
            </el-table-column>

            <el-table-column label="故障原因" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.maintainer }}</span>
                </template>
            </el-table-column>

            <el-table-column label="解决方案" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.solution }}</span>
                </template>
            </el-table-column>

            <el-table-column label="补充信息" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">
                        删除
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
    </template>
</div>

<script>

    /**
     * 获取数据
     * @returns {*[]}
     */
    function getData () {
        let data = [];
        $.ajax({
            url:'../repairrecordinfo',
            async:false,
            success:function (res) {
                data = res.data;
            }
        })
        return data;
    }

    const main = {
        data() {
            return {
                tableData: getData(),
                multipleSelection: []
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            /**
             * 删除
             * @param row
             */
            handleDelete(row) {
                let id = row.recordId;
                const message = this.$message;
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    $.ajax({
                        url:'../repairrecordinfo/' + id,
                        type:'delete',
                        success: function (res) {
                            if (res) {
                                message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        }
                    })
                }, () => {

                })
            },
            add () {
                this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
                    dangerouslyUseHTMLString: true
                });
            }
        }
    }
    const Ctor = Vue.extend(main);
    new Ctor().$mount('#app');
</script>
</body>
</html>
